@import "./theme/index.scss";

// 多主题获取
@mixin theme() {

    @each $theme-name,
    $theme-map in $themes {
        $theme-map: $theme-map !global;

        [data-theme='#{$theme-name}'] #{if(&, "&", "*")} {
            @content;
        }
    }

}

@function themed($key) {
    @return map-get($theme-map, $key);
}

 

@function mble($px) {
    @if $px==0 {
      @return 0;
    }
  
    @else if $px==1 {
      @return 1px;
    }
  
    @return calc(($px / 750) * 100vw);
}


//获取对应主题对应属性下相关状态的属性值
@function isStyle($style, $type) {

    //map-get 根据对应的key值返回map中对应的值
    @if map-has-key($theme-map, $style, $type) {
        @return map-get(map-get($theme-map, $style), $type);
    }

    @else {
        @return "";
    }
}

// 获取主题的颜色，使用方法：@include styles("background", "top-bar")
@mixin styles ($style, $type) {
    @include theme() {
        @if map-has-key($theme-map, $style, $type) {
            #{$style}: isStyle($style, $type);
        }
    }
}

//获取背景颜色，使用方法：@include background_color("top-bar")
@mixin background_color($type) {
    @include theme() {
        @if map-has-key($theme-map, "background", $type) {
            background-color: isStyle("background", $type);
        }
    }
}

// 获取字体颜色，使用方法：@include font_color("top-bar")
@mixin font_color($type) {
    @include theme() {
        @if map-has-key($theme-map, "color", $type) {
            color: isStyle("color", $type);
        }
    }
}

// 边框颜色，使用方法：@include border_color("top-bar")
@mixin border_color($type, $style: solid, $width: px2rem(1)) {
    @include theme() {
        @if map-has-key($theme-map, "border", $type) {
            border-color: isStyle("border", $type);
            border-style: $style;
            border-width: $width;
        }
    }
}

@mixin border_color_top($type, $style: solid, $width: px2rem(1)) {
    @include theme() {
        @if map-has-key($theme-map, "border", $type) {
            border-style: $style;
            border-width: $width;
            border-color: isStyle("border", $type);
            border-right: none;
            border-left: none;
            border-bottom: none;
        }
    }
}

@mixin border_color_left($type, $style: solid, $width: px2rem(1)) {
    @include theme() {
        @if map-has-key($theme-map, "border", $type) {
            border-style: $style;
            border-width: $width;
            border-color: isStyle("border", $type);
            border-top: none;
            border-right: none;
            border-bottom: none;
        }
    }
}

@mixin border_color_right($type, $style: solid, $width: px2rem(1)) {
    @include theme() {
        @if map-has-key($theme-map, "border", $type) {
            border-style: $style;
            border-width: $width;
            border-color: isStyle("border", $type);
            border-top: none;
            border-left: none;
            border-bottom: none;
        }
    }
}

@mixin border_color_bottom($type, $style: solid, $width: px2rem(1)) {
    @include theme() {
        @if map-has-key($theme-map, "border", $type) {
            border-style: $style;
            border-width: $width;
            border-color: isStyle("border", $type);
            border-top: none;
            border-left: none;
            border-right: none;
        }
    }
}

// 透明度，使用方法：@include opacity("top-bar")
@mixin opacity($data) {
    @include theme() {
        @if map-has-key($theme-map, "color", $type) {
            opacity: isStyle("color", $type);
        }
    }
}